<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JS + CSS Clock</title>
</head>

<body>


  <div class="clock">
    <div class="clock-face">
      <div class="hand hour-hand"></div>
      <div class="hand min-hand"></div>
      <div class="hand second-hand"></div>
    </div>
  </div>


  <style>
    html {
      background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
      background-size:cover;
      font-family:'helvetica neue';
      text-align: center;
      font-size: 10px;
    }

    body {
      font-size: 2rem;
      display:flex;
      flex:1;
      min-height: 100vh;
      align-items: center;
    }

    .clock {
      width: 30rem;
      height: 30rem;
      border:20px solid white;
      border-radius:50%;
      margin:50px auto;
      position: relative;
      padding:2rem;
      box-shadow:
        0 0 0 4px rgba(0,0,0,0.1),
        inset 0 0 0 3px #EFEFEF,
        inset 0 0 10px black,
        0 0 10px rgba(0,0,0,0.2);
    }

    .clock-face {
      position: relative;
      width: 100%;
      height: 100%;
      transform: translateY(-3px); /* account for the height of the clock hands */
    }

    .hand {
      width:50%;
      height:6px;
      background:black;
      position: absolute;
      top:50%;
      transform-origin: 100% 50%;
    }

  </style>

<script>   

  function showClock() {
    const now = new Date();
    const second = now.getSeconds();
    const minute = now.getMinutes();
    const hour = now.getHours();
    const second_rotate = (second * 6+90)%360;
    const minute_rotate = (minute * 6+90)%360+second_rotate/60;
    const hour_rotate = (hour * 30+90)%360+minute_rotate/60;
    document.querySelector(".second-hand").style.transform = `rotate(${second_rotate}deg)`;
    document.querySelector(".min-hand").style.transform = `rotate(${minute_rotate}deg)`;
    document.querySelector(".hour-hand").style.transform = `rotate(${hour_rotate}deg)`;
  }
  window.setInterval(showClock, 1000);
  showClock();

</script>
</body>

</html>